<template>
  <div class="mac-pro">
    <div class="lock-wrap">
      <div class="lock-housing">
        <div class="lock">
          <div class="lever"></div>
        </div>
      </div>
    </div>

    <div class="handle-wrap left">
      <div class="handel-wholes"></div>
      <div class="handle"></div>
    </div>

    <div class="handle-wrap right">
      <div class="handel-wholes"></div>
      <div class="handle"></div>
    </div>

    <div class="io">
      <div class="power-indicator"></div>
      <div class="power-button"></div>
      <div class="port one"></div>
      <div class="port two"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
html {
  box-sizing: border-box;
  font-size: 150%;
}

@media (max-width: 400px) {
  html {
    font-size: 122%;
  }
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 1em;
}

.mac-pro {
  position: relative;
  width: 31em;
  height: 15em;
  overflow: hidden;
  background-color: #e3e3e7;
  border-radius: 2em;
  font-size: 250%;
}

.lock-wrap::before,
.lock-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.125em;
  height: 0.125em;
  transform: translate(3.75em, -50%);
  background-color: #383a3e;
  border-radius: 50%;
}

.lock-wrap::after {
  transform: translate(-50%, -3.875em) scale(0.625);
  background-color: #e3e3e7;
  box-shadow: 0 0 0 0.0375em rgba(0, 0, 0, 0.5);
}

.lock-housing {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: lock-housing 2s linear alternate infinite;
}

@keyframes lock-housing {
  33.333% {
    transform: rotate(0);
  }
  66.666%,
  100% {
    transform: rotate(-90deg);
  }
}

.lock {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7em;
  height: 7em;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-color: #c5c6c9;
  border: 1px solid #77757b;
  border-radius: 3.5em;
  box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.25),
    inset 0 0 2em rgba(0, 0, 0, 0.25);
  animation: lock 2s linear alternate infinite;
}

@keyframes lock {
  0% {
    background-color: #c5c6c9;
    box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.25),
      inset 0 0 2em rgba(0, 0, 0, 0.25);
  }
  33.333%,
  100% {
    background-color: #e3e3e7;
    box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.25),
      inset 0 0 2em rgba(0, 0, 0, 0);
  }
}

.lock::before {
  content: "";
  position: absolute;
  z-index: 10;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #e3e3e7;
  border-radius: 3.5em 0 0 3.5em;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25), inset 0.75em 0 1em 0.5em #e3e3e7,
    inset 0 0 1.5em rgba(0, 0, 0, 0);
  animation: lock-before 2s linear alternate infinite;
}

@keyframes lock-before {
  0% {
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25), inset 0.75em 0 1em 0.5em #e3e3e7,
      inset 0 0 1.5em rgba(0, 0, 0, 0);
  }
  33.333%,
  100% {
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25), inset 0.75em 0 1em 0.5em #e3e3e7,
      inset 0 0 1.5em rgba(0, 0, 0, 0.3);
  }
}

.lock::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.375em;
  width: 0.125em;
  height: 0.125em;
  transform: translateY(-50%);
  background-color: #383a3e;
  border-radius: 50%;
}

.lever {
  position: absolute;
  z-index: 1;
  right: 0;
  width: 50%;
  height: 100%;
}

.lever::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transform: rotateY(80deg);
  background-color: #e3e3e7;
  border: 1.25em solid #e3e3e7;
  border-left: none;
  border-radius: 0 3.5em 3.5em 0;
  box-shadow: inset -0.25em 0 0.25em rgba(0, 0, 0, 0.1);
  animation: lever 2s linear alternate infinite;
}

@keyframes lever {
  0% {
    transform: rotateY(0);
    border-color: #e3e3e7;
    box-shadow: inset -0.25em 0 0.25em rgba(0, 0, 0, 0.1);
  }
  33.333%,
  100% {
    transform: rotateY(90deg);
    border-color: #adaeb1;
    box-shadow: inset -1em 0 1em rgba(0, 0, 0, 0.1);
  }
}

.lever::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-origin: 0 50%;
  transform: translate(-50%, -50%);
  background-color: #c5c6c9;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 10%,
    rgba(0, 0, 0, 0.05),
    rgba(255, 255, 255, 0.5),
    rgba(0, 0, 0, 0.025),
    rgba(255, 255, 255, 0.15),
    rgba(0, 0, 0, 0.05),
    rgba(255, 255, 255, 0.25) 90%
  );
  border-radius: 0 3.5em 3.5em 0;
  animation: lever-depth 2s ease-in alternate infinite;
}

@keyframes lever-depth {
  0% {
    transform: translate(-50%, -50%) scaleX(1.125) scaleY(1);
  }
  33.333%,
  100% {
    transform: translate(-50%, -50%) scaleX(0.15) scaleY(1.75);
  }
}

.handle-wrap {
  position: absolute;
  top: 50%;
  left: 1em;
  width: 2em;
  height: 13em;
  transform: translateY(-50%);
  background-color: #e3e3e7;
  border: 1px solid #77757b;
  border-radius: 1em;
  box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0), inset 0 0 0 0.25em #bdbcc1;
  animation: handel-wrap 2s linear alternate infinite;
}

@keyframes handel-wrap {
  0%,
  63.333% {
    box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0), inset 0 0 0 0.25em #bdbcc1;
  }
  66.666%,
  100% {
    box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.5), inset 0 0 0 0.25em #bdbcc1;
  }
}

.handle-wrap.right {
  left: auto;
  right: 1em;
  transform: translateY(-50%) rotate(180deg);
}

.handle-wrap::before,
.handle-wrap::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  width: 1px;
  height: 1em;
  background-color: #cccace;
}

.handle-wrap::after {
  bottom: auto;
  top: calc(100% + 1px);
}

.handel-wholes {
  position: absolute;
  top: 0.375em;
  left: 50%;
  width: 1.125em;
  height: 1.125em;
  transform: translateX(-50%);
  background-color: #000;
  border-radius: 50%;
  box-shadow: 0 11.0625em;
}

.handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 12em;
  transform: translate(-50%, -50%);
  background-color: #fcfcfd;
  border-radius: 0.5em;
  box-shadow: 0.25em 0 1em rgba(0, 0, 0, 0.3);
}

.handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8125em;
  height: 11.8125em;
  transform: translate(-50%, -50%);
  background-color: #000;
  border-radius: 0.5em 0.6em 0.6em 0.5em / 0.75em;
  box-shadow: inset -0.5em -1em 0.75em -0.625em rgba(0, 0, 0, 0.3),
    inset -0.5em 1em 0.75em -0.625em rgba(0, 0, 0, 0.3),
    inset 0.0625em -0.125em 0.25em, inset 0.0625em 0.125em 0.25em,
    inset 0.0625em 0, inset 0.6875em 0 #fcfcfd;
  filter: blur(0.025em);
}

.io {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6.875em;
}

.power-indicator {
  position: absolute;
  top: 5em;
  left: 50%;
  width: 0.25em;
  height: 0.25em;
  transform: translateX(-50%);
  background-color: #b4b2b6;
  border-radius: 50%;
  box-shadow: inset 0 0 0.125em rgba(0, 0, 0, 0.5);
}

.power-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}

.power-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 0.5em;
  transform: translate(-50%, -50%);
  border: 1px solid;
  border-radius: 50%;
}

.power-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.125em;
  width: 0.25em;
  height: 1px;
  transform: translateY(-50%);
  background-color: #000;
  box-shadow: 0 0 0 0.0625em #e3e3e7;
}

.port {
  position: absolute;
  bottom: 5.125em;
  left: 50%;
  width: 0.625em;
  height: 0.25em;
  transform: translateX(-50%);
  background-color: #474647;
  border-radius: 0.25em;
  box-shadow: inset -0.125em 0 0.0625em rgba(0, 0, 0, 0.5),
    inset 0 0 0.0625em 0.0625em rgba(255, 255, 255, 0.5);
}

.port.two {
  bottom: 4.125em;
}

.port.two::before {
  content: "";
  position: absolute;
  top: -0.43125em;
  left: 50%;
  width: 0.25em;
  height: 0.125em;
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 152.3'%3E%3Cpolygon points='0,62.9 0,0 109.6,72.9 109.6,11.8 234.2,95.2 242.3,64.2 300,152.3 202,143.8 218.6,121.9 146.7,81.7 146.7,143.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
}

@media (max-width: 720px) {
  .io {
    left: 4.875em;
  }
}

@media (max-width: 530px) {
  .io {
    top: 12em;
    left: 50%;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
  }

  .power-indicator {
    top: 3.5em;
  }

  .port {
    bottom: 4.125em;
  }

  .port.two {
    bottom: 3.125em;
  }
}
</style>
